<template>
  <el-container>
    <el-header height="80px">
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="1"><h3>图书借阅后台管理系统</h3></el-menu-item>
        <el-sub-menu index="2">
          <template #title>Workspace</template>
          <el-menu-item index="2-1">item one</el-menu-item>
          <el-menu-item index="2-2">item two</el-menu-item>
          <el-menu-item index="2-3">item three</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-header>
    <el-container class="content-container">
      <el-aside width="240px">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
        >
          <el-menu-item index="1">
            <router-link to="/home/category"
              ><el-icon><Files /></el-icon>
              <span>图书类别管理</span></router-link
            >
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/home/book"
              ><el-icon><Notebook /></el-icon>
              <span>图书管理</span></router-link
            >
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/home/record"
              ><el-icon><Service /></el-icon> <span>借阅管理</span></router-link
            >
          </el-menu-item>
          <el-menu-item index="3">
            <router-link to="/home/carousel"
              ><el-icon><DocumentCopy /></el-icon>
              <span>轮播图管理</span></router-link
            >
          </el-menu-item>
          <el-menu-item index="4">
            <router-link to="/home/caution"
              ><el-icon><Bell /></el-icon> <span>预警管理</span></router-link
            >
          </el-menu-item>
          <el-menu-item index="5">
            <router-link to="/home/user"
              ><el-icon><Coin /></el-icon> <span>用户管理</span></router-link
            >
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup></script>

<style scoped>
.el-header {
  padding: 0 !important;
}

.el-menu-demo {
  height: 100%;
  display: flex;
  justify-content: space-between;
  border: none !important;
  align-items: center;
}
.content-container {
  height: calc(100vh - 60px);
}
.el-menu-vertical-demo {
  height: 100%;
}

ul > li a {
  text-decoration: none;
  color: white;
}
</style>
